<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { EditPen, Refresh } from '@element-plus/icons-vue'
import { ElMessage, type FormInstance } from 'element-plus'

const pageTabsIndex = ref(0)

const bunkerId = ref('')

const enviTabsIndex = ref(1)


// 获取当天日期
const timeDate = new Date();
const today = timeDate.toISOString().split('T')[0]

console.log(today)

// api
import { DeviceTEnvmonitorMonitored, GetAllBunkerData } from "@/api";

let bunkerData = ref<any>([])
function getGetAllBunkerData(){
    GetAllBunkerData().then(res=>{
        console.log('所属煤场----',res.data)
        bunkerData.value = res.data
        bunkerId.value = res.data[0].bunkerId
        console.log('bunkerId----',bunkerId.value)
        getDeviceTEnvmonitorMonitored(bunkerId.value)
    })
}

// category 说明
// 温度  InfraRed
// CO   CarbonMonoxide
// SO2  SulfurDioxide
// 粉尘  Dust
// CH4  Methane
// O2   Oxygen


const listData = ref<any>([])
//list
function getDeviceTEnvmonitorMonitored(bunkerId:any){
    let category = ''
    if(enviTabsIndex.value == 0){
        category = 'InfraRed'
    }
    else if(enviTabsIndex.value == 1){
        category = 'CarbonMonoxide'
    }
    else if(enviTabsIndex.value == 2){
        category = 'SulfurDioxide'
    }
    else if(enviTabsIndex.value == 3){
        category = 'Dust'
    }
    else if(enviTabsIndex.value == 4){
        category = 'Methane'
    }
    else if(enviTabsIndex.value == 5){
        category = 'Oxygen'
    }
    else if(enviTabsIndex.value == 6){
        category = 'Enviromnent'
    }
    DeviceTEnvmonitorMonitored(bunkerId, category, today).then(res=>{
        console.log('list-------',res.data.monitoredEnvironments)
        listData.value = res.data.monitoredEnvironments
    })
}

// tab
function clickPageTabs(index:number){
    pageTabsIndex.value = index
    bunkerId.value = bunkerData.value[index].bunkerId
    getDeviceTEnvmonitorMonitored(bunkerId.value)
    //console.log(bunkerId.value)
}
// tab
function clickEnviTabs(index:number){
    enviTabsIndex.value = index
    getDeviceTEnvmonitorMonitored(bunkerId.value)
}


onMounted(()=>{
    getGetAllBunkerData()
    
})



</script>
<template>
    <div class="flex_bg">
        <ul class="page_tabs">
            <li v-for="(item,index) in bunkerData" @click="clickPageTabs(index)" :class="pageTabsIndex == index?'hover':''">{{ item.bunkerName }}</li>
        </ul>

        <div class="envi_tabs mt20">
            <div class="envi_coal">
                <img class="ph" src="../../assets/img/huanjingjiance.png" width="100%" alt="">
            </div>
            <ul class="envi_tabs_nav">
                <template v-for="(item,index) in listData" :key="index">
                    <!-- <li v-if="item.name == '测温'" :class="[enviTabsIndex == 0 ? 'hover' : '', item.isOnWarning ? 'item_red' : '']" @click="clickEnviTabs(0)">
                        <img src="../../assets/img/ico_e1.png" alt="">
                        <p>测温</p>
                    </li> -->
                    <li v-if="item.name == 'CO'" :class="[enviTabsIndex == 1 ? 'hover' : '', item.isOnWarning ? 'item_red' : '']" @click="clickEnviTabs(1)">
                        <img src="../../assets/img/ico_e2.png" alt="">
                        <p>CO</p>
                    </li>
                    <li v-if="item.name == 'SO2'" :class="[enviTabsIndex == 2 ? 'hover' : '', item.isOnWarning ? 'item_red' : '']" @click="clickEnviTabs(2)">
                        <img src="../../assets/img/ico_e3.png" alt="">
                        <p>SO2</p>
                    </li>
                    <li v-if="item.name == '粉尘'" :class="[enviTabsIndex == 3 ? 'hover' : '', item.isOnWarning ? 'item_red' : '']" @click="clickEnviTabs(3)">
                        <img src="../../assets/img/ico_e4.png" alt="">
                        <p>粉尘</p>
                    </li>
                    <li v-if="item.name == 'CH4'" :class="[enviTabsIndex == 4 ? 'hover' : '', item.isOnWarning ? 'item_red' : '']" @click="clickEnviTabs(4)">
                        <img src="../../assets/img/ico_e5.png" alt="">
                        <p>CH4</p>
                    </li>
                    <li v-if="item.name == 'O2'" :class="[enviTabsIndex == 5 ? 'hover' : '', item.isOnWarning ? 'item_red' : '']" @click="clickEnviTabs(5)">
                        <img src="../../assets/img/ico_e6.png" alt="">
                        <p>O2</p>
                    </li>
                    <li v-if="item.name == '环境'" :class="[enviTabsIndex == 6 ? 'hover' : '', item.isOnWarning ? 'item_red' : '']" @click="clickEnviTabs(6)">
                        <img src="../../assets/img/ico_e7.png" alt="">
                        <p>环境</p>
                    </li>
                </template>
            </ul>
        </div>

        
        <div v-for="(item,index) in listData">
            <!-- tabs1 -->
            <ul class="temp" v-if="enviTabsIndex == 0">
                <template v-if="item.devices?.length != 0">
                <li v-for="(itema,indexa) in item.devices">
                    <img class="ph" v-if="itema.noAvailableLink" src="../../assets/img/1.jpg" alt="">
                    <div class="info">
                        <h3>{{ itema.name }}</h3>
                        <p>
                            MAX: <strong>{{itema.maxValue}}{{ itema.deviceUnit }}</strong>
                        </p>
                        <p>
                            Avg: <strong>{{itema.averageValue}}{{ itema.deviceUnit }}</strong>
                        </p>
                        <p>
                            Min: <strong>{{itema.minValue}}{{ itema.deviceUnit }}</strong>
                        </p>
                        <div v-if="itema.isWorking" class="tag blue"><i></i>正常</div>
                        <div v-else class="tag red"><i></i>异常</div>
                    </div>
                </li>
                </template>
                <el-empty v-else :image-size="100" description="暂无数据" />
            </ul>

            <!-- tabs2 -->
            <ul class="co_list" v-if="enviTabsIndex == 1">
                <template v-if="item.devices?.length != 0">
                <li v-for="(itema,indexa) in item.devices" :class="[itema.isWorking?'':'hover',itema.isOnWarning?'hover_red':'']">
                    <img class="ico" src="../../assets/img/ico_e2.png" alt="">
                    <p>
                        <span>{{ itema.name }}</span>
                        <strong>{{ itema.displayText }}</strong>
                    </p>
                    <div v-if="itema.isWorking" class="state online"><i></i>在线</div>
                    <div v-else class="state offline"><i></i>离线</div>
                </li>
                </template>
                <el-empty v-else :image-size="100" description="暂无数据" />
            </ul>

            <!-- tabs3 -->
            <ul class="co_list" v-if="enviTabsIndex == 2">
                <template v-if="item.devices?.length != 0">
                <li v-for="(itema,indexa) in item.devices" :class="[itema.isWorking?'':'hover',itema.isOnWarning?'hover_red':'']">
                    <img class="ico" src="../../assets/img/ico_e3.png" alt="">
                    <p>
                        <span>{{ itema.name }}</span>
                        <strong>{{ itema.displayText }}</strong>
                    </p>
                    <div v-if="itema.isWorking" class="state online"><i></i>在线</div>
                    <div v-else class="state offline"><i></i>离线</div>
                </li>
                </template>
                <el-empty v-else :image-size="100" description="暂无数据" />
            </ul>
            
            <!-- tabs4 -->
            <ul class="co_list" v-if="enviTabsIndex == 3">
                <template v-if="item.devices?.length != 0">
                <li v-for="(itema,indexa) in item.devices" :class="[itema.isWorking?'':'hover',itema.isOnWarning?'hover_red':'']">
                    <img class="ico" src="../../assets/img/ico_e4.png" alt="">
                    <p>
                        <span>{{ itema.name }}</span>
                        <strong>{{ itema.displayText }}</strong>
                    </p>
                    <div v-if="itema.isWorking" class="state online"><i></i>在线</div>
                    <div v-else class="state offline"><i></i>离线</div>
                </li>
                </template>
                <el-empty v-else :image-size="100" description="暂无数据" />
            </ul>

            <!-- tabs5 -->
            <ul class="co_list" v-if="enviTabsIndex == 4">
                <template v-if="item.devices?.length != 0">
                <li v-for="(itema,indexa) in item.devices" :class="[itema.isWorking?'':'hover',itema.isOnWarning?'hover_red':'']">
                    <img class="ico" src="../../assets/img/ico_e5.png" alt="">
                    <p>
                        <span>{{ itema.name }}</span>
                        <strong>{{ itema.displayText }}</strong>
                    </p>
                    <div v-if="itema.isWorking" class="state online"><i></i>在线</div>
                    <div v-else class="state offline"><i></i>离线</div>
                </li>
                </template>
                <el-empty v-else :image-size="100" description="暂无数据" />
            </ul>

            <!-- tabs6 -->
            <ul class="co_list" v-if="enviTabsIndex == 5">
                <template v-if="item.devices?.length != 0">
                <li v-for="(itema,indexa) in item.devices" :class="[itema.isWorking?'':'hover',itema.isOnWarning?'hover_red':'']">
                    <img class="ico" src="../../assets/img/ico_e6.png" alt="">
                    <p>
                        <span>{{ itema.name }}</span>
                        <strong>{{ itema.displayText }}</strong>
                    </p>
                    <div v-if="itema.isWorking" class="state online"><i></i>在线</div>
                    <div v-else class="state offline"><i></i>离线</div>
                </li>
                </template>
                <el-empty v-else :image-size="100" description="暂无数据" />
            </ul>

            <!-- tabs7 -->
            <div class="degree" v-if="enviTabsIndex == 6">
                <div v-for="(itema,indexa) in item.groupedData" :key="indexa">
                    <h3 class="mt30">{{itema.name}}</h3>
                    <ul class="co_list" v-if="itema.devices?.length != 0">
                        <li v-for="(itemb,indexb) in itema.devices" :class="indexb == 2?'hover':''" :key="index">
                            <img class="ico" v-if="index == 2" src="../../assets/img/ico_e8a.png" alt="">
                            <img class="ico" v-else src="../../assets/img/ico_e8.png" alt="">
                            <p>
                                <span>1号 {{itema.name}}</span>
                                <strong>24 {{ itema.unit }}</strong>
                            </p>
                            <div class="state online"><i></i>在线</div>
                        </li>
                    </ul>
                    <el-empty v-else :image-size="100" description="暂无数据" />
                </div>

                <!-- <h3 class="mt30">湿度仪</h3>
                <ul class="co_list">
                    <li v-for="(item,index) in 4" :class="index == 2?'hover':''" :key="index">
                        <img class="ico" v-if="index == 2" src="../../assets/img/ico_e9a.png" alt="">
                        <img class="ico" v-else src="../../assets/img/ico_e9.png" alt="">
                        <p>
                            <span>1号湿度仪</span>
                            <strong>45%</strong>
                        </p>
                        <div class="state online"><i></i>在线</div>
                    </li>
                </ul> -->

                <!-- <h3 class="mt30">风速仪</h3>
                <ul class="co_list">
                    <li v-for="(item,index) in 4" :class="index == 2?'hover':''" :key="index">
                        <img class="ico" v-if="index == 2" src="../../assets/img/ico_e10a.png" alt="">
                        <img class="ico" v-else src="../../assets/img/ico_e10.png" alt="">
                        <p>
                            <span>1号风速仪</span>
                            <strong>1m/s</strong>
                        </p>
                        <div class="state online"><i></i>在线</div>
                    </li>
                </ul> -->
            </div>
            
        </div>
        


    </div>
</template>
<style scoped lang="scss">
.co_list{
    display: flex;
    align-items: stretch;
    justify-content: flex-start;
    flex-wrap: wrap;
    margin-left: -1%;
    li{
        width: 24%;
        height: 130px;
        background: #FFFFFF;
        border-radius: 4px 4px 4px 4px;
        border: 1px solid #E0E5ED;
        margin: 20px 0 0 1%;
        padding:30px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        position: relative;
        overflow: hidden;
        &.hover{
            filter: grayscale(100%);
            background: #F8F8F8;
        }
        &.hover_red{
            background: #FBEEEE;
            border: 1px solid #E04940;
            strong{
                color: #E04940;
            }
        }
        .ico{
            width: 68px;
            flex-shrink: 0;
            margin-right: 40px;
        }
        p{
            width: 100%;
            span{
                display: block;
                font-size: 18px;
                color: #667581;
                line-height: 24px;
            }
            strong{
                display: block;
                font-weight: bold;
                font-size: 20px;
                color: #3D4755;
                line-height: 24px;
                margin-top: 8px;
            }
        }
        .state{
            position: absolute;
            right: 0;
            top: 0;
            width: 80px;
            height: 26px;
            line-height: 26px;
            text-align: center;
            font-size: 14px;
            
            display: flex;
            align-items: center;
            justify-content: center;
            i{
                flex-shrink: 0;
                display: block;
                width: 8px;
                height: 8px;
                border-radius: 50%;
                
                margin-right: 6px;
            }
            &.online{
                background: linear-gradient( 268deg, #88F2D8 0%, #E6FFF9 100%);
                color: #00B386;
                i{
                    background: #00B386;
                }
            }
            &.offline{
                background: linear-gradient( 268deg, #C2CFDB 0%, #EFF1F4 100%);
                color: #667581;
                i{
                    background: #667581;
                }
            }
        }
    }
}
.temp{
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    flex-wrap: wrap;
    li{
        width: 49%;
        background: #FFFFFF;
        border-radius: 4px 4px 4px 4px;
        border: 1px solid #E0E5ED;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding:30px;
        margin-top: 30px;
        .ph{
            flex-shrink: 0;
            width: 350px;
            height: 240px;
            margin-right: 40px;
            object-fit: cover;
        }
        .info{
            width: 100%;
            position: relative;
            .tag{
                position: absolute;
                right: 0;
                top: 68px;
                height: 24px;
                border-radius: 15px 15px 15px 15px;
                font-size: 14px;
                display: flex;
                align-items: center;
                justify-content: center;
                padding: 0 15px;
                i{
                    flex-shrink: 0;
                    width: 8px;
                    height: 8px;
                    border-radius: 50%;
                    margin-right: 4px;
                }
                &.blue{
                    color: #2565C8;
                    background: #EBF3FF;
                    i{
                        background: #2565C8;
                    }
                }
                &.red{
                    color: #E04940;
                    background: #fce9e9;
                    i{
                        background: #E04940;
                    }
                }
            }
            h3{
                font-weight: 400;
                font-size: 16px;
                color: #667581;
                border-bottom: 1px solid #eee;
                line-height: 20px;
                padding:0px 0 15px;
            }
            p{
                font-size: 18px;
                color: #3D4755;
                line-height: 24px;
                margin-top: 20px;
            }
            strong{
                font-weight: bold;
            }
        }
    }
}
.envi_tabs{
    display: flex;
    align-items: center;
    .envi_coal{
        flex-shrink: 0;
        width: 190px;
        height: 190px;
        border: 1px solid #E0E5ED;
        overflow: hidden;
        margin-right: 100px;
        .ph{
            width: 188px;
            height: 188px;
            object-fit: cover;
        }
    }
    .envi_tabs_nav{
        display: flex;
        width: 100%;
        align-items: center;
        li{
            flex-shrink: 0;
            width: 130px;
            height: 130px;
            background: #FFFFFF;
            border: 1px solid #E0E5ED;
            border-radius: 50%;
            text-align: center;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            margin: 0 49px 0 9px;
            cursor: pointer;
            img{
                width: auto;
                height: 52px;
            }
            &.item_red{
                background: #F7EDED;
                border: 1px solid #E04940;
                p{
                    color: #E04940;
                }
            }
            &.hover{
                width: 148px;
                height: 148px;
                background: url('../../assets/img/ico_e_bg.png') no-repeat center top;
                background-size: 100% auto;
                border:none;
                margin: 0 40px 0 0px;
                p{
                    font-size: 20px;
                    font-weight: bold;
                }
            }
            p{
                font-weight: 500;
                font-size: 18px;
                color: #3D4755;
                line-height: 20px;
                margin-top: 10px;
            }
        }
    }
}
</style>